<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
         :root {
            font-size: 15px;
        }
        
        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form id="editForm" class="row">
            <!-- 输入省份名字 -->
            <div class="mb-3 col">
                <label class="form-label">省份名字</label>
                <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称">
            </div>
            <div class="mb-3 col">
                <label class="form-label">城市名字</label>
                <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称">
            </div>
        </form>
        <button type="button" class="btn btn-primary sel-btn">查询</button>
        <br><br>
        <p>地区列表</p>
        <ul class="list-group">
            <!-- 示例地区 -->
            <li class="list-group-item">东城区</li>

        </ul>
    </div>
    <script>
        // 目标: 根据省份和城市名字，查询对应的地区列表

        // 1.查询按钮-点击事件
        document.querySelector('.sel-btn').addEventListener('click', () => {
            // 2.收集省份和城市名字
            const pname = document.querySelector('.province').value
            const cname = document.querySelector('.city').value
                // 3.组织查询参数字符串
            const qObj = {
                    pname,
                    cname
                }
                // 查询参数对象 ->查询参数字符串
            const paramsObj = new URLSearchParams(qObj)
            const queryString = paramsObj.toString()
                // console.log(queryString);
                // 4.使用XHR对象，查询地区列表
            const xhr = new XMLHttpRequest()
            xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
            xhr.addEventListener('loadend', () => {
                console.log(xhr.response);
                const data = JSON.parse(xhr.response)
                console.log(data);
                const htmlStr = data.list.map(areaName => {
                    return `<li class="list-group-item">${areaName}</li>`
                }).join('')
                console.log(htmlStr);
                /** 
                 * ['<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>', '<li class="list-group-item">东城区</li>']
                加join后：                
                 <li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li><li class="list-group-item">东城区</li>
                 
                 
                 */
                document.querySelector('.list-group').innerHTML = htmlStr
            })
            xhr.send()
        })
    </script>
</body>

</html>